<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我是一个首页</title>
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/layui/css/layui.css">

    <style>
        /*头部*/
        .ksd-headerbox {
            height: 200px;
            text-align: center;
            background: url("https://img-u-3.51miz.com/preview/element/00/01/12/38/E-1123861-A28174D6.jpg!/quality/90/unsharp/true/compress/true/format/jpg/fh/320") #FAFAFA;
            overflow: hidden;
        }
        .ksd-headerbox .title{
            font-size: 28px;
        }
        .ksd-headerbox .ksd-chead-box {
            width: 680px;
            margin: 0 auto;
            text-align: center;
            padding-top: 20px;
        }

        /*主题内容*/
        .ksd-section{
            margin-top: 100px;
        }
        .ksd-container{}

        /*解决插值表达式在延迟下暴露骨架的问题*/
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>

    <div id="app" v-cloak>

        <input type="hidden" id="stateId" th:value="${id}">

        <!--头部-->
        <header>
            <div class="ksd-headerbox">
                <div class="ksd-chead-box">
                    <h3 class="title pt30 b">{{stateVo.title}}</h3>
                    <p class="pt15" v-html="stateVo.description"></p>
                    <div class="pt10 f12">
                        <span class="mr15">参与人数：{{stateVo.personNum}}</span>
                        <span class="ml15">统计时间：{{stateVo.createTime}}</span>
                    </div>
                </div>
            </div>
        </header>

        <!--主题内容-->
        <section class="ksd-section">
            <div class="layui-container ksd-container">
                <div class="layui-row" style="text-align: center;">
                    <div class="layui-col-md12">
                        <div id="main" style="width: 100%;height:400px;"></div>
                    </div>
                </div>
            </div>
        </section>

        <!--底部-->
        <footer class="mt30">
            <div class="layui-container ksd-container">
                <div class="layui-row">
                    <div class="layui-col-md12 tc">
                        <p class="b f20 g6">统计还剩余：{{stateVo.endTime}}</p>
                    </div>
                </div>
            </div>
        </footer>

    </div>

    <script src="/js/vue.min.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/layui/layui.js"></script>
    <script src="/echarts/echarts.min.js"></script>

    <script>
        var vue = new Vue({
            el:"#app",
            data: {
                stateId: '',
                stateVo: {}
            },
            created: function () {
                this.stateId = document.getElementById("stateId").value;
                alert(1)
                //查询统计数据信息
                this.loadStateDetail(this.loadCharts)
            },
            methods: {
                //查询统计数据信息接口定义
                loadStateDetail: function (callback) {
                    // this就近指向
                    var that = this;
                    axios.get("/state/detail?stateId="+this.stateId).then(function(res)
                     {
                        //箭头函数将this推向最顶层  =>
                        // console.log(res)
                        that.stateVo = res.data.data.stateVo;
                        //获取到对应的明细数据
                         var stateDetailList = that.stateVo.stateDetailList;
                         // console.log(stateDetailList)
                        callback && callback(stateDetailList);
                    });
                },
                //统计报表的加载
                loadCharts: function (stateDetailList) {

                    if (typeof stateDetailList == "undefined"||stateDetailList==null || stateDetailList.length == 0) {
                        return;
                    }
                    var xAxisData = [];
                    var yAxisData = [];
                    for (var i = 0; i < stateDetailList.length; i++) {
                        xAxisData.push(stateDetailList[i].title);
                        yAxisData.push(stateDetailList[i].itemnum)
                    }

                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));

                    // 指定图表的配置项和数据
                    var option = {
                        xAxis: {
                            type: 'category',
                            data: xAxisData
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: yAxisData,
                            type: 'bar'
                        }]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            }
        })
    </script>

</body>
</html>
